<!-- 插入链接弹框 -->
<template>
    <el-dialog 
        :visible.sync="visible" 
        :close-on-click-modal="false"
        append-to-body
        custom-class="link-dialog" 
        :before-close="handleClose"
        width="500px" 
        title="添加链接">
        <el-form :model="formData" :rules="rules" ref="linkRef" label-width="86px">
            <el-form-item label="文字：" prop="title">
                <el-input size="small" placeholder="请输入文字" v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="Url：" prop="url">
                <el-input size="small" placeholder="请输入链接网址" v-model="formData.url"></el-input>
            </el-form-item>
        </el-form>
        <template slot="footer" class="dialog-footer">
            <el-button @click="handleClose" size="small">取 消</el-button>
            <el-button type="primary" @click="handleAddLink" size="small">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props: {
        options: Object,             // 基础参数
    },
    data() {
        return {
            visible: false,      // 插入链接对话框显示状态
            formData: { title: '', url: '' },
            rules: {
                title: [{ required: true, message: '请输入文字', trigger: ['blur', 'change'] }],
                url: [{ required: true, message: '请输入链接', trigger: ['blur', 'change'] }]
            }
        }
    },
    watch: {
        "options": function(val) {
            if (val.visible) {
                this.visible = true
                this.formData.title = val.title || ''
                this.formData.url = val.url || ''
            }
        }
    },
    methods: {
        handleClose() {
            this.$refs.linkRef.resetFields()
            this.visible = false
        },
        insertAtCursor(dom, value, cb) {
            if (document.selection) { // IE
                dom.focus()
                const sel = document.selection.createRange()
                sel.text = value
            } else if (dom.selectionStart || dom.selectionStart == '0') { // Others
                const [
                    startPos, endPos, val, length = val.length
                ] = [
                        dom.selectionStart, dom.selectionEnd, dom.value
                    ]
                dom.value = val.substring(0, startPos) + value + val.substring(endPos, length)
                dom.focus()
                dom.selectionStart = startPos + value.length
                dom.selectionEnd = startPos + value.length
            } else {
                dom.value += value
            }
            typeof cb === 'function' && cb(dom.value)
        },
        handleAddLink() {
            this.$refs['linkRef'].validate(valid => {
                if (valid) {
                    const dom = document.getElementById(this.options.el)
                    this.insertAtCursor(
                        dom, 
                        `<a href="${this.formData.url}">${this.formData.title}</a>`, 
                        res => {
                            this.$emit('update', res)
                            this.visible = false
                        }
                    )
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .link-dialog .el-input {
        width: 360px;
    }
</style>